<template>
    <div class="page-container">
        <!-- Search Card -->
        <div class="search-card">
            <div class="card-header">
                <span class="card-title">查询条件</span>
            </div>
            <div class="search-section">
                <el-form :inline="true" :model="queryParams" class="query-form">
                    <el-form-item label="企业名称">
                        <el-input
                            v-model="queryParams.nameFuzzy"
                            placeholder="请输入企业名称"
                            clearable
                            class="custom-input"
                            style="width: 200px"
                        />
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select
                            v-model="queryParams.status"
                            placeholder="请选择状态"
                            clearable
                            class="custom-select"
                            style="width: 150px"
                        >
                            <el-option label="创建未备案" :value="0" />
                            <el-option label="已备案未审核" :value="1" />
                            <el-option label="已退回" :value="2" />
                            <el-option label="正常" :value="3" />
                            <el-option label="倒闭" :value="4" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="resetQuery" class="btn-secondary" round>重置</el-button>
                        <el-button
                            type="primary"
                            class="btn-primary-theme"
                            round
                            @click="queryEnterprises"
                        >
                            <el-icon class="mr-1"><search /></el-icon>查询
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <!-- Table Card -->
        <div class="table-card">
            <div class="card-header">
                <span class="card-title">企业列表</span>
                <span class="section-subtitle"
                    >共 <span class="highlight-num">{{ total }}</span> 条记录</span
                >
            </div>
            <div class="table-section">
                <el-table
                    :data="tableData"
                    stripe
                    :loading="loading"
                    style="width: 100%"
                    class="modern-table"
                    :header-cell-style="{
                        background: '#f8fafc',
                        color: '#475569',
                        fontWeight: '700',
                        fontSize: '13px',
                        height: '56px',
                        textAlign: 'center',
                        borderBottom: '1px solid #f1f5f9',
                    }"
                    :cell-style="{ textAlign: 'center', padding: '8px 0' }"
                    :row-style="{ height: '72px' }"
                >
                    <el-table-column prop="enterpriseId" label="企业ID" width="200" align="center">
                        <template #default="{ row }">
                            <span class="cell-text font-mono">{{ row.enterpriseId }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="企业名称"
                        min-width="180"
                        show-overflow-tooltip
                        align="left"
                    >
                        <template #default="{ row }">
                            <span class="cell-primary-text">{{ row.name }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="contactName" label="联系人" width="120" align="center" />
                    <el-table-column prop="phoneNum" label="联系电话" width="140" align="center" />
                    <el-table-column prop="email" label="邮箱" width="200" align="center" />
                    <el-table-column prop="status" label="状态" width="120" align="center">
                        <template #default="{ row }">
                            <div
                                class="status-badge"
                                :class="`status-${getStatusType(row.status)}`"
                            >
                                <span class="status-dot"></span>
                                {{ getStatusText(row.status) }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createdAt" label="创建时间" width="180" align="center">
                        <template #default="{ row }">
                            <span class="timestamp-text">{{ formatDate(row.createdAt) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="100" fixed="right" align="center">
                        <template #default="{ row }">
                            <el-button
                                link
                                type="primary"
                                class="action-btn"
                                @click="openViewEnterpriseDialog(row)"
                            >
                                查看
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- Pagination -->
                <div class="pagination-wrapper">
                    <el-pagination
                        v-model:current-page="queryParams.pageNo"
                        v-model:page-size="queryParams.pageSize"
                        :page-sizes="[10, 20, 50, 100]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                    />
                </div>
            </div>
        </div>

        <!-- 查看企业对话框（只读模式） -->
        <el-dialog
            v-model="showViewEnterpriseDialog"
            title="企业信息详情"
            width="800px"
            class="custom-dialog"
            align-center
        >
            <template #header>
                <div class="custom-dialog-header">
                    <span class="title">企业信息详情</span>
                </div>
            </template>
            <div class="view-content">
                <!-- 企业基本信息 -->
                <div class="info-section">
                    <el-descriptions :column="2" border class="custom-desc">
                        <el-descriptions-item label="企业名称" :span="2">
                            <span class="view-primary-text">{{
                                viewEnterpriseForm.enterpriseInfo.name || '-'
                            }}</span>
                        </el-descriptions-item>
                        <el-descriptions-item label="企业ID" :span="2">
                            <span class="view-mono-text">{{
                                viewEnterpriseForm.enterpriseInfo.enterpriseId || '-'
                            }}</span>
                        </el-descriptions-item>
                        <el-descriptions-item label="组织机构代码">
                            <span class="cell-text">{{
                                viewEnterpriseForm.enterpriseInfo.orgCode || '-'
                            }}</span>
                        </el-descriptions-item>
                        <el-descriptions-item label="企业状态">
                            <el-tag
                                :type="getStatusType(viewEnterpriseForm.enterpriseInfo.status)"
                                effect="dark"
                                round
                            >
                                {{ getStatusText(viewEnterpriseForm.enterpriseInfo.status) }}
                            </el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="创建时间">
                            <span class="cell-text">{{
                                formatDate(viewEnterpriseForm.enterpriseInfo.createdAt) || '-'
                            }}</span>
                        </el-descriptions-item>
                        <el-descriptions-item label="更新时间">
                            <span class="cell-text">{{
                                formatDate(viewEnterpriseForm.enterpriseInfo.updatedAt) || '-'
                            }}</span>
                        </el-descriptions-item>
                    </el-descriptions>
                </div>

                <!-- 分类信息 -->
                <div class="info-section">
                    <el-descriptions :column="1" border class="custom-desc">
                        <el-descriptions-item label="所属地区">
                            <span class="cell-text">
                                <el-icon class="mr-1"><Location /></el-icon>
                                {{ getRegionName(viewEnterpriseForm.regionValue) || '-' }}
                            </span>
                        </el-descriptions-item>
                        <el-descriptions-item label="所属性质">
                            <span class="cell-text">
                                <el-icon class="mr-1"><Briefcase /></el-icon>
                                {{ getNatureName(viewEnterpriseForm.natureValue) || '-' }}
                            </span>
                        </el-descriptions-item>
                        <el-descriptions-item label="所属行业">
                            <span class="cell-text">
                                <el-icon class="mr-1"><Shop /></el-icon>
                                {{ getIndustryName(viewEnterpriseForm.industryValue) || '-' }}
                            </span>
                        </el-descriptions-item>
                        <el-descriptions-item label="经营业务详情">
                            <span class="cell-text">{{
                                viewEnterpriseForm.enterpriseInfo.industryDesc || '-'
                            }}</span>
                        </el-descriptions-item>
                    </el-descriptions>
                </div>

                <!-- 联系信息 -->
                <div class="info-section">
                    <el-descriptions :column="2" border class="custom-desc">
                        <el-descriptions-item label="联系人名称">
                            <span class="cell-text">{{
                                viewEnterpriseForm.enterpriseInfo.contactName || '-'
                            }}</span>
                        </el-descriptions-item>
                        <el-descriptions-item label="联系电话">
                            <span class="cell-text">
                                <el-icon class="mr-1"><Phone /></el-icon>
                                {{ viewEnterpriseForm.enterpriseInfo.phoneNum || '-' }}
                            </span>
                        </el-descriptions-item>
                        <el-descriptions-item label="邮政编码">
                            <span class="cell-text">{{
                                viewEnterpriseForm.enterpriseInfo.postalCode || '-'
                            }}</span>
                        </el-descriptions-item>
                        <el-descriptions-item label="传真号">
                            <span class="cell-text">{{
                                viewEnterpriseForm.enterpriseInfo.faxNum || '-'
                            }}</span>
                        </el-descriptions-item>
                        <el-descriptions-item label="联系人地址" :span="2">
                            <span class="cell-text">
                                <el-icon class="mr-1"><MapLocation /></el-icon>
                                {{ viewEnterpriseForm.enterpriseInfo.address || '-' }}
                            </span>
                        </el-descriptions-item>
                        <el-descriptions-item label="邮箱" :span="2">
                            <span class="cell-text">
                                <el-icon class="mr-1"><Message /></el-icon>
                                {{ viewEnterpriseForm.enterpriseInfo.email || '-' }}
                            </span>
                        </el-descriptions-item>
                    </el-descriptions>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button
                        type="primary"
                        class="btn-primary-theme"
                        @click="showViewEnterpriseDialog = false"
                    >
                        <el-icon class="mr-1"><Check /></el-icon>
                        关闭
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 显示账号信息对话框 -->
        <el-dialog
            v-model="showAccountInfoDialog"
            title="企业账号创建成功"
            width="500px"
            class="custom-dialog"
            align-center
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :show-close="false"
        >
            <div class="account-info-container">
                <el-alert type="success" :closable="false" show-icon style="margin-bottom: 20px">
                    <template #title>
                        <span>企业账号已成功创建，请妥善保管以下账号信息：</span>
                    </template>
                </el-alert>

                <el-descriptions :column="1" border class="custom-desc">
                    <el-descriptions-item label="企业名称">
                        {{ createdAccountInfo.enterpriseName || '-' }}
                    </el-descriptions-item>
                    <el-descriptions-item label="用户名">
                        <div class="account-info-row">
                            <span class="account-value">{{
                                createdAccountInfo.username || '-'
                            }}</span>
                            <el-button
                                text
                                type="primary"
                                size="small"
                                @click="copyToClipboard(createdAccountInfo.username)"
                            >
                                复制
                            </el-button>
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item label="密码">
                        <div class="account-info-row">
                            <span class="account-value">{{
                                createdAccountInfo.password || '-'
                            }}</span>
                            <el-button
                                text
                                type="primary"
                                size="small"
                                @click="copyToClipboard(createdAccountInfo.password)"
                            >
                                复制
                            </el-button>
                        </div>
                    </el-descriptions-item>
                </el-descriptions>

                <div class="account-info-tip">
                    <el-icon><WarningFilled /></el-icon>
                    <span>请妥善保管账号信息，建议保存后立即修改密码</span>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button
                        type="primary"
                        class="btn-primary-theme"
                        @click="closeAccountInfoDialog"
                        >确定</el-button
                    >
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue';
import {
    ElCard,
    ElTable,
    ElTableColumn,
    ElButton,
    ElTag,
    ElDialog,
    ElForm,
    ElFormItem,
    ElInput,
    ElSelect,
    ElOption,
    ElCascader,
    ElPagination,
    ElMessage,
    ElMessageBox,
    ElAlert,
    ElDescriptions,
    ElDescriptionsItem,
    ElIcon,
    ElRow,
    ElCol,
} from 'element-plus';
import {
    WarningFilled,
    OfficeBuilding,
    Collection,
    Location,
    Briefcase,
    Shop,
    User,
    Phone,
    MapLocation,
    Message,
    Check,
    Search,
} from '@element-plus/icons-vue';
import enterpriseApi from '../../api/enterprise.js';
// 导入地区、企业性质和行业的数据
import regionData from '../../dict/yunnan_region_code.json';
import enterpriseTypeData from '../../dict/enterprise_type.json';
import enterpriseIndustryData from '../../dict/enterprise_industry.json';

// 地区、企业性质和行业的数据
const regionOptions = ref(regionData);
const enterpriseTypeOptions = ref(enterpriseTypeData);
const enterpriseIndustryOptions = ref(enterpriseIndustryData);

// 级联选择相关数据已清理

// 地区、性质、行业选择相关处理方法已清理

// 表格数据
const tableData = ref([]);
const total = ref(0);
const loading = ref(false);
const actionLoading = ref(false);

// 查询参数
const queryParams = ref({
    pageNo: 1,
    pageSize: 10,
    nameFuzzy: '',
    status: undefined,
    region: undefined,
    nature: undefined,
    industry: undefined,
});

// 对话框显示状态
const showAccountInfoDialog = ref(false); // 显示账号信息对话框
const showViewEnterpriseDialog = ref(false); // 显示查看企业对话框

// 创建成功的账号信息
const createdAccountInfo = ref({
    enterpriseName: '',
    username: '',
    password: '',
});

// 企业表单相关数据已清理

// 查看企业表单数据（只读）
const viewEnterpriseForm = reactive({
    enterpriseInfo: {
        enterpriseId: '',
        name: '',
        orgCode: '',
        region: undefined,
        nature: undefined,
        industry: undefined,
        industryDesc: '',
        contactName: '',
        address: '',
        postalCode: '',
        phoneNum: '',
        faxNum: '',
        email: '',
        status: undefined,
        createdAt: '',
        updatedAt: '',
    },
    regionValue: [],
    natureValue: [],
    industryValue: [],
});

// 表单引用
const viewEnterpriseFormRef = ref();

// 打开创建企业对话框
const openCreateEnterpriseDialog = () => {
    isEditMode.value = false;
    currentEnterpriseId.value = '';

    // 重置表单
    if (enterpriseFormRef.value) {
        enterpriseFormRef.value.resetFields();
    }
    // 清空表单数据
    enterpriseForm.enterpriseInfo.name = '';
    enterpriseForm.enterpriseInfo.orgCode = '';
    enterpriseForm.enterpriseInfo.region = undefined;
    enterpriseForm.enterpriseInfo.nature = undefined;
    enterpriseForm.enterpriseInfo.industry = undefined;
    enterpriseForm.enterpriseInfo.industryDesc = '';
    enterpriseForm.enterpriseInfo.contactName = '';
    enterpriseForm.enterpriseInfo.address = '';
    enterpriseForm.enterpriseInfo.postalCode = '';
    enterpriseForm.enterpriseInfo.phoneNum = '';
    enterpriseForm.enterpriseInfo.faxNum = '';
    enterpriseForm.enterpriseInfo.email = '';

    // 重置级联选择框的值
    regionValue.value = [];
    natureValue.value = [];
    industryValue.value = [];

    // 显示对话框
    showCreateEnterpriseDialog.value = true;
};

// 打开查看企业对话框
const openViewEnterpriseDialog = async (row) => {
    try {
        // 加载企业详细信息
        const response = await enterpriseApi.getEnterprise(row.enterpriseId);

        if (response && response.code === 200 && response.data) {
            const enterprise = response.data;

            // 填充查看表单数据
            viewEnterpriseForm.enterpriseInfo.enterpriseId = enterprise.enterpriseId || '';
            viewEnterpriseForm.enterpriseInfo.name = enterprise.name || '';
            viewEnterpriseForm.enterpriseInfo.orgCode = enterprise.orgCode || '';
            viewEnterpriseForm.enterpriseInfo.region = enterprise.region;
            viewEnterpriseForm.enterpriseInfo.nature = enterprise.nature;
            viewEnterpriseForm.enterpriseInfo.industry = enterprise.industry;
            viewEnterpriseForm.enterpriseInfo.industryDesc = enterprise.industryDesc || '';
            viewEnterpriseForm.enterpriseInfo.contactName = enterprise.contactName || '';
            viewEnterpriseForm.enterpriseInfo.address = enterprise.address || '';
            viewEnterpriseForm.enterpriseInfo.postalCode = enterprise.postalCode || '';
            viewEnterpriseForm.enterpriseInfo.phoneNum = enterprise.phoneNum || '';
            viewEnterpriseForm.enterpriseInfo.faxNum = enterprise.faxNum || '';
            viewEnterpriseForm.enterpriseInfo.email = enterprise.email || '';
            viewEnterpriseForm.enterpriseInfo.status =
                enterprise.status !== undefined ? enterprise.status : 0;
            viewEnterpriseForm.enterpriseInfo.createdAt = enterprise.createdAt || '';
            viewEnterpriseForm.enterpriseInfo.updatedAt = enterprise.updatedAt || '';

            // 设置级联选择器的值（用于显示名称）
            await nextTick();

            // 级联路径设置相关代码已清理

            // 显示对话框
            showViewEnterpriseDialog.value = true;
        } else {
            ElMessage.error('加载企业信息失败');
        }
    } catch (error) {
        console.error('加载企业信息失败:', error);
        ElMessage.error('加载企业信息失败，请重试');
    }
};

// 打开编辑企业对话框功能已移除

// findCascaderPath辅助函数已清理

// 创建企业功能已移除

// 更新企业功能已移除

// 删除企业功能已移除

// 加载企业列表
const loadEnterprises = async () => {
    try {
        loading.value = true;
        const response = await enterpriseApi.loadAllEnterprise(queryParams.value);
        console.log('企业列表响应:', response);

        // 检查响应格式
        if (response && response.code === 200) {
            tableData.value = response.data?.list || [];
            total.value = response.data?.totalCount || 0;
        } else {
            console.error('响应格式错误:', response);
            ElMessage.error(response?.info || '加载企业列表失败');
            tableData.value = [];
            total.value = 0;
        }
    } catch (error) {
        console.error('加载企业列表失败:', error);
        const errorMessage =
            error?.response?.data?.message ||
            error?.response?.data?.info ||
            error?.message ||
            '加载企业列表失败，请重试';
        ElMessage.error(errorMessage);
        tableData.value = [];
        total.value = 0;
    } finally {
        loading.value = false;
    }
};

// 查询企业
const queryEnterprises = () => {
    queryParams.value.pageNo = 1;
    loadEnterprises();
};

// 重置查询
const resetQuery = () => {
    queryParams.value = {
        pageNo: 1,
        pageSize: 10,
        nameFuzzy: '',
        status: undefined,
        region: undefined,
        nature: undefined,
        industry: undefined,
    };
    loadEnterprises();
};

// 分页大小变化
const handleSizeChange = (size) => {
    queryParams.value.pageSize = size;
    loadEnterprises();
};

// 当前页码变化
const handleCurrentChange = (current) => {
    queryParams.value.pageNo = current;
    loadEnterprises();
};

// 状态选项配置
const statusOptions = [
    { value: 0, label: '创建未备案' },
    { value: 1, label: '已备案未审核' },
    { value: 2, label: '已退回' },
    { value: 3, label: '正常' },
    { value: 4, label: '倒闭' },
];

// 获取状态文本
const getStatusText = (status) => {
    const statusMap = {
        0: '创建未备案',
        1: '已备案未审核',
        2: '已退回',
        3: '正常',
        4: '倒闭',
    };
    return statusMap[status] || '未知';
};

// 获取状态类型（用于标签颜色）
const getStatusType = (status) => {
    const typeMap = {
        0: 'info',
        1: 'warning',
        2: 'danger',
        3: 'success',
        4: 'danger',
    };
    return typeMap[status] || 'info';
};

// 获取状态按钮类型（用于按钮颜色）
const getStatusButtonType = (status) => {
    const typeMap = {
        0: 'info',
        1: 'warning',
        2: 'danger',
        3: 'success',
        4: 'danger',
    };
    return typeMap[status] || 'info';
};

// 获取地区名称（根据路径）
const getRegionName = (path) => {
    if (!path || path.length === 0) return '';
    let current = regionOptions.value;
    let names = [];
    for (let i = 0; i < path.length; i++) {
        const code = path[i];
        const item = current.find((opt) => opt.code === code);
        if (item) {
            names.push(item.name);
            if (item.children && item.children.length > 0) {
                current = item.children;
            } else {
                break;
            }
        } else {
            break;
        }
    }
    return names.join(' / ');
};

// 获取企业性质名称（根据路径）
const getNatureName = (path) => {
    if (!path || path.length === 0) return '';
    let current = enterpriseTypeOptions.value;
    let names = [];
    for (let i = 0; i < path.length; i++) {
        const code = path[i];
        const item = current.find((opt) => opt.code === code);
        if (item) {
            names.push(item.name);
            if (item.children && item.children.length > 0) {
                current = item.children;
            } else {
                break;
            }
        } else {
            break;
        }
    }
    return names.join(' / ');
};

// 获取行业名称（根据路径）
const getIndustryName = (path) => {
    if (!path || path.length === 0) return '';
    let current = enterpriseIndustryOptions.value;
    let names = [];
    for (let i = 0; i < path.length; i++) {
        const code = path[i];
        const item = current.find((opt) => opt.code === code);
        if (item) {
            names.push(item.name);
            if (item.children && item.children.length > 0) {
                current = item.children;
            } else {
                break;
            }
        } else {
            break;
        }
    }
    return names.join(' / ');
};

// 处理状态变更
const handleStatusChange = async (newStatus) => {
    const statusName = getStatusText(newStatus);
    const currentStatusName = getStatusText(enterpriseForm.enterpriseInfo.status);

    try {
        await ElMessageBox.confirm(
            `确定要将企业状态从「${currentStatusName}」修改为「${statusName}」吗？`,
            '确认修改状态',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }
        );

        // 显示加载状态（使用表格的loading状态）
        loading.value = true;

        // 更新企业状态
        const updateData = {
            ...enterpriseForm.enterpriseInfo,
            status: newStatus,
        };

        const response = await enterpriseApi.updateEnterprise(
            currentEnterpriseId.value,
            updateData
        );

        // 检查响应是否成功
        if (response && response.code === 200) {
            ElMessage.success('企业状态修改成功');

            // 更新表单中的状态值
            enterpriseForm.enterpriseInfo.status = newStatus;

            // 关闭对话框
            showCreateEnterpriseDialog.value = false;

            // 重新加载企业列表
            await loadEnterprises();
        } else {
            ElMessage.error(response?.info || '修改企业状态失败');
        }
    } catch (error) {
        // Element Plus的MessageBox在用户取消时会抛出reject，这里捕获并忽略
        if (error && typeof error === 'string' && error.includes('cancel')) {
            return;
        }
        if (error === 'cancel' || (error && error.toString().includes('cancel'))) {
            return;
        }
        console.error('修改企业状态失败:', error);
        const errorMessage =
            error?.response?.data?.message ||
            error?.response?.data?.info ||
            error?.message ||
            '修改企业状态失败，请重试';
        ElMessage.error(errorMessage);
    } finally {
        // 关闭加载状态
        loading.value = false;
    }
};

// 格式化日期
const formatDate = (date) => {
    if (!date) return '';
    const d = new Date(date);
    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(
        d.getDate()
    ).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(
        2,
        '0'
    )}`;
};

// 复制到剪贴板
const copyToClipboard = async (text) => {
    try {
        await navigator.clipboard.writeText(text);
        ElMessage.success('已复制到剪贴板');
    } catch (error) {
        console.error('复制失败:', error);
        // 备用方案：使用传统的复制方法
        const textArea = document.createElement('textarea');
        textArea.value = text;
        textArea.style.position = 'fixed';
        textArea.style.opacity = '0';
        document.body.appendChild(textArea);
        textArea.select();
        try {
            document.execCommand('copy');
            ElMessage.success('已复制到剪贴板');
        } catch (err) {
            ElMessage.error('复制失败，请手动复制');
        }
        document.body.removeChild(textArea);
    }
};

// 关闭账号信息对话框
const closeAccountInfoDialog = () => {
    showAccountInfoDialog.value = false;
    // 清空账号信息
    createdAccountInfo.value = {
        enterpriseName: '',
        username: '',
        password: '',
    };
};

// 初始加载数据
onMounted(() => {
    loadEnterprises();
});
</script>

<style scoped lang="scss">
/* --- Global Resets & Layout --- */
.page-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 24px 40px;
    box-sizing: border-box;
    color: #1e293b;
    font-family:
        'Inter',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        Roboto,
        sans-serif;
}

/* Header */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 40px;
    background: linear-gradient(135deg, #4f46e5 0%, #818cf8 100%);
    border-radius: 24px;
    color: white;
    box-shadow: 0 20px 40px -12px rgba(79, 70, 229, 0.3);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 24px;
}

.page-title {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 8px 0;
    letter-spacing: -0.02em;
    color: white;
}

.page-description {
    font-size: 15px;
    opacity: 0.9;
    margin: 0;
    font-weight: 400;
    color: white;
}

/* Search Card */
.search-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid rgba(241, 245, 249, 1);
    overflow: hidden;
}

.card-header {
    padding: 16px 24px;
    border-bottom: 1px solid #f1f5f9;
    background: #fafafa;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

.search-section {
    padding: 24px;
}

.query-form {
    margin-bottom: 0;
    :deep(.el-form-item) {
        margin-bottom: 0;
        margin-right: 24px;
    }
    :deep(.el-form-item:last-child) {
        margin-right: 0;
    }
}

.form-actions {
    display: flex;
    gap: 12px;
    margin-left: auto;
    align-self: flex-end;
}

/* Table Card */
.table-card {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(241, 245, 249, 1);
    overflow: hidden;
    padding: 8px;
    margin-bottom: 24px;
}

.section-subtitle {
    font-size: 13px;
    color: #64748b;

    .highlight-num {
        color: #4f46e5;
        font-weight: 700;
        font-size: 15px;
        padding: 0 2px;
    }
}

/* Modern Table Styles */
.modern-table {
    border-radius: 16px;
    overflow: hidden;
    --el-table-border-color: #f1f5f9;
    --el-table-row-hover-bg-color: #f8fafc;
    --el-table-header-bg-color: #f8fafc;
}

.cell-primary-text {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}

.cell-text {
    font-size: 13px;
    color: #64748b;
}

.font-mono {
    font-family: 'JetBrains Mono', monospace;
}

.timestamp-text {
    font-variant-numeric: tabular-nums;
    color: #334155;
    font-size: 13px;
    font-weight: 500;
}

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 8px;
}

.status-success {
    background: #ecfdf5;
    color: #059669;
    .status-dot {
        background: #10b981;
    }
}
.status-primary {
    background: #eff6ff;
    color: #2563eb;
    .status-dot {
        background: #3b82f6;
    }
}
.status-warning {
    background: #fff7ed;
    color: #ea580c;
    .status-dot {
        background: #f97316;
    }
}
.status-danger {
    background: #fef2f2;
    color: #dc2626;
    .status-dot {
        background: #ef4444;
    }
}
.status-info {
    background: #f1f5f9;
    color: #64748b;
    .status-dot {
        background: #94a3b8;
    }
}

/* Buttons */
.btn-primary-theme {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
    border: none !important;
    color: white !important;
    font-weight: 600;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
    transition: all 0.2s ease;
    padding: 8px 20px;
}

.btn-primary-theme:hover {
    background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.35);
}

.btn-danger-theme {
    background: #ef4444 !important;
    border: none !important;
    color: white !important;
    font-weight: 600;
    border-radius: 8px;
    padding: 8px 20px;
    transition: all 0.2s ease;

    &:hover {
        background: #dc2626 !important;
    }
}

.btn-secondary {
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-weight: 500;
    border-radius: 8px;
    padding: 8px 20px;

    &:hover {
        background: #f8fafc;
        color: #1e293b;
        border-color: #cbd5e1;
    }
}

.action-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.divider {
    width: 1px;
    height: 14px;
    background: #e2e8f0;
}

.action-btn {
    font-weight: 600;
    padding: 4px 8px;
    height: auto;
}

.pagination-wrapper {
    padding: 16px 24px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #f1f5f9;
}

/* Inputs */
.custom-input,
.custom-select {
    :deep(.el-input__wrapper) {
        border-radius: 8px;
        box-shadow: 0 0 0 1px #e2e8f0 inset;
        padding: 6px 12px;
        &.is-focus {
            box-shadow: 0 0 0 2px #818cf8 inset;
        }
    }
}

/* Dialog Customization */
:deep(.custom-dialog) {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    .el-dialog__header {
        margin: 0;
        padding: 20px 24px;
        border-bottom: 1px solid #f1f5f9;
        .el-dialog__title {
            font-weight: 700;
            font-size: 18px;
            color: #0f172a;
        }
    }

    .el-dialog__body {
        padding: 32px;
    }

    .el-dialog__footer {
        padding: 20px 24px;
        border-top: 1px solid #f1f5f9;
        background-color: #f8fafc;
    }
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    padding: 10px 0;

    .el-button {
        padding: 10px 20px;
        display: flex;
        align-items: center;
        gap: 6px;
    }
}

.info-section {
    margin-bottom: 0;

    :deep(.el-descriptions__table) {
        border: 1px solid #f1f5f9;
    }

    :deep(.el-descriptions__label) {
        background-color: #f8fafc;
        color: #64748b;
        font-weight: 600;
        width: 120px;
    }

    :deep(.el-descriptions__content) {
        color: #334155;
    }
}

.view-primary-text {
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
}

.view-mono-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: #64748b;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
}

.mr-1 {
    margin-right: 4px;
}

/* Account Success */
.account-success {
    text-align: center;
    padding: 20px 0;

    .success-icon {
        font-size: 48px;
        color: #10b981;
        margin-bottom: 16px;
    }

    .account-card {
        background: #f8fafc;
        border-radius: 12px;
        padding: 16px;
        border: 1px solid #f1f5f9;
        margin-top: 16px;

        .row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;
            &:last-child {
                margin-bottom: 0;
            }

            .value {
                font-family: monospace;
                font-weight: 600;
                color: #334155;
            }
        }
    }
}
</style>

<style lang="scss">
/* Global styles for ElMessageBox */
.custom-message-box {
    border-radius: 16px !important;
    overflow: hidden;
    border: none !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    padding-bottom: 20px !important;

    .el-message-box__header {
        padding: 20px 24px;
        border-bottom: 1px solid #f1f5f9;

        .el-message-box__title {
            font-weight: 700;
            color: #0f172a;
        }
    }

    .el-message-box__content {
        padding: 24px;
        color: #334155;
        font-size: 15px;
    }

    .el-message-box__btns {
        padding: 0 24px 0 0;

        .el-button {
            border-radius: 8px;
            font-weight: 600;
            padding: 10px 20px;
            height: auto;
        }

        .btn-primary-theme {
            background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
            border: none;
            color: white;

            &:hover {
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
            }
        }

        .btn-secondary {
            background: #fff;
            border: 1px solid #e2e8f0;
            color: #475569;

            &:hover {
                background: #f8fafc;
                color: #1e293b;
            }
        }
    }
}

/* Global styles for Element Plus Poppers (Dropdowns, Tooltips, etc.) */
.el-popper.is-light {
    border-radius: 12px !important;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid #f1f5f9 !important;
}

.el-select-dropdown {
    border-radius: 12px !important;
    overflow: hidden;
}

.el-select__popper {
    border-radius: 12px !important;
}
</style>
